<script src="./page.js"></script>
<style lang="less" rel="stylesheet/less" scoped>
    @import "./page.less";
</style>

<template>
	<el-row class="menu-wrap">
		<el-menu :default-openeds="[]" :unique-opened="true" background-color="#1f2d3d" text-color="#fff" active-text-color="#ffd04b" class="removeBorder">
			<div v-for="(item, index) in menus" :key="item.title">
				<el-submenu :index="String(index)" v-if="item.subItems">
						<template slot="title"><span slot="title" class="title">{{item.title}}</span></template>
						<el-menu-item-group>
							<el-menu-item v-for="(subItem, subIndex) in item.subItems" :key="subItem.title" :index="`${index}-${subIndex}`"><a class="sub-title" :href="subItem.url">{{subItem.title}}</a></el-menu-item>
						</el-menu-item-group>
				</el-submenu>
				<el-menu-item v-else :index="String(index)">
					<span slot="title"><a class="title" :href="item.url">{{item.title}}</a></span>
				</el-menu-item>
			</div>
		</el-menu>
	</el-row>
</template>